
.listSlider { width: 300px;height:100%; min-height: 250px; display: block; position: relative; background: #fff; overflow: hidden; }
.listSlider ul { list-style: none; }
.listSlider-content { float: left; width: 100%; display: block; overflow: auto; min-height: 250px;}
.listSlider-content ul { float: left; width: 100%; display: block; position: relative; }
.listSlider-content ul li { float: left; width: 100%; }
.listSlider-content ul ul li a { padding: 5px 10px; display: block; border-bottom: 1px solid #f3f3f3; text-transform: capitalize;cursor: pointer; }
.listSlider-content ul ul li a:hover { background: #f3faff; border-color: #d5ebf9; }
.listSlider-content .title { padding: 5px 0; text-indent: 10px; background: #bbb; color: #fff; width: 100%; float: left; font-weight: bold; text-transform: uppercase; }
.listSlider-content .selected .title { background: #666; }
.listSlider .listSlider-nav { position: absolute; right: 0; top: 0; background: #5388c8; min-height: 250px; }
.listSlider .listSlider-nav ul { padding: 5px 0; }
.listSlider .listSlider-nav li a { padding: 3px 5px; line-height: 13px; text-align: center; color: #fff; font-weight: bold; display: block; text-transform: uppercase; cursor: pointer;cursor: pointer; }
.listSlider #debug { position: absolute; bottom: 0; left: 0; padding: 5px; background: #000; color: #fff; }
.listSlider .arrow { font-size: 2px; line-height: 0%; width: 0px; border-bottom: 8px solid #fff; border-left: 5px solid #2f5a88; border-right: 5px solid #2f5a88; position: relative; top: 5px; }
.listSlider .down { border-bottom: none; border-top: 8px solid #fff; top: 15px; }
.listSlider .up { border-bottom: none; border-bottom: 8px solid #fff; top: -10px; }
.listSlider .slide-up, .listSlider .slide-down { height: 20px; background: #2f5a88; text-align: center; cursor: pointer; float: right; width: 100%; position: relative; }
.listSlider .tipContainer{width: 100%;height: 0px;text-align: center;}
.listSlider .tip{width: 60px;height: 40px;position: relative;margin: auto;z-index: 9;top:100px;display: none;color: #2f5a88;

text-align: center;font-size: 30px;font-weight:bolder;text-shadow:gray 2px 2px 0px; padding: 0px;}
.listSlider .tip.show{
	display: block;

	-webkit-animation-name:'showTip';
     -webkit-animation-duration: 0.3s;
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-animation-delay: 0s;
     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
     -webkit-animation-direction: normal;/*定义动画方式*/
     -webkit-animation-fill-mode:forwards;
}
.listSlider .tip.show.hide{
	display: block;

	-webkit-animation-name:'hideTip';
     -webkit-animation-duration: 0.5s;
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-animation-delay: 0s;
     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
     -webkit-animation-direction: normal;/*定义动画方式*/
     -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes 'showTip'{
	  0% {
      	display: block;
         opacity: 0;
      }
      100% {
      	display: block;
         opacity: 1;
      }
    }

@-webkit-keyframes 'hideTip'{
      80% {
      	display: block;
         opacity: 1;
      }
      99% {
      	display: block;
      }
      100% {
      	display: none;
         opacity: 0;
      }
    }